<template>
	<view class="all-main">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="欢迎进入风动社区"></u-loading-page>
		<view v-if="!loadding" class="main">
			<view class="products">
				<view class="lefts">
					<text>{{product_name}}</text>
					<text class="sn">{{sn}}</text>
				</view>
				<view class="rights" @click="selectPro">
					<u-icon name="list" color="#2979ff" size="28"></u-icon>
				</view>
			</view>
			<u-picker :show="pro_show" ref="uPicker" :columns="pro_columns" keyName="name" closeOnClickOverlay
				@confirm="changeProduct" @cancel="pro_show = false" @close="pro_show = false"></u-picker>
			<view v-if="type == 2" class="items" @click="clickTo(1)">
				<view class="lefts">
					通讯费返还
				</view>
				<view class="rights">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view v-if="type == 2" class="items" @click="clickTo(2)">
				<view class="lefts">
					兑换超值礼品
				</view>
				<view class="rights">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view v-if="type == 1" class="items" @click="clickTo(3)">
				<view class="lefts">
					到店礼 + 通讯费返还
				</view>
				<view class="rights">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view v-if="type == 1" class="items" @click="clickTo(4)">
				<view class="lefts">
					兑换超值大礼品
				</view>
				<view class="rights">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadding: true,
				pro_show: false,
				userinfo: {},
				price: 68,
				pro_columns: [],
				product_id: '',
				product_name: '',
				type: '',
				sn: ''
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo');
			this.loadData()
		},
		onShow() {
			this.userinfo = uni.getStorageSync('userinfo');
			this.loadData()
		},
		onBackPress(options) {
			uni.switchTab({
				url: '/pages/index/index'
			})
			return true
		},
		methods: {
			// 加载可领SN数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/getGiftSn',
					header: {
						'token': this.userinfo.token
					}
				});
				uni.hideLoading()
				var _this = this
				if (res.code == 1) {
					this.pro_columns = [res.data]
					if (res.data.length > 0) {
						this.loadding = false
						this.sn = res.data[0].sn
						this.product_name = res.data[0].name
						this.getSnInfo()
					} else {
						uni.showModal({
							title: '提示',
							content: '暂无可返还的流量费',
							success: function(res) {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						});
					}
				}
			},
			// 获取产品信息
			async getSnInfo() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/getSnInfo',
					data: {
						sn: this.sn
					},
					header: {
						'token': this.userinfo.token
					}
				});
				if (res.code == 1) {
					this.product_name = res.data.name
					this.type = res.data.type
				}
			},
			// 跳转
			clickTo(type) {
				if (type == 1) {
					var _this = this
					if (this.userinfo.is_verify != 1) {
						uni.showModal({
							title: '提示',
							content: '请您先进行实名认证',
							success: function(res) {
								if (res.confirm) {
									_this._realname()
								}
							}
						});
						return false
					}
					uni.navigateTo({
						url: '/pages/version5/index/communication/return?sn=' + this.sn
					})
				}
				if (type == 2 || type == 4) {
					uni.navigateTo({
						url: '/pages/version5/index/communication/exchange?type=' + type + '&sn=' + this.sn
					})
				}
				if (type == 3) {
					uni.navigateTo({
						url: '/pages/version5/index/communication/exchange?type=' + type + '&sn=' + this.sn
					})
				}
			},
			// 去实名认证
			_realname() {
				uni.navigateTo({
					url: '/pages/version5/index/realname/realname'
				})
			},
			// 去绑定银行卡
			_bank() {
				uni.navigateTo({
					url: '/pages/version5/index/bank_card/bank_card'
				})
			},
			// 选择产品
			changeProduct(e) {
				this.pro_show = false
				if (this.product_id != e.value[0].id) {
					this.product_id = e.value[0].id
				}
			},
			// 打开产品
			selectPro() {
				this.pro_show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}
	
	.all-main {
		.main {
			.products {
				background-color: #ffffff;
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				
				.lefts {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					
					.sn {
						padding-left: 16rpx;
					}
				}
			}
			
			.title {
				background-color: #ffffff;
				text-align: center;
				padding: 30rpx;
				
				text {
					font-size: 28rpx;
				}
				
				.price {
					margin-left: 20rpx;
					color: #fa3534;
					font-weight: bold;
				}
			}
			
			.items {
				padding: 30rpx;
				margin: 30rpx 0;
				border-radius: 12rpx;
				background-color: #ffffff;
				display: flex;
				justify-content: space-between;
				
				.rights {
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>
